<template>
  <div class="qrcodes-create-page">
    <NavigationBarBack title="新建渠道活码"/>
    <div class="alter-box">
      <div class="warning-svg">
        <svg-icon class-name="warning-svg" icon-class="warning"/>
      </div>
      <div class="waring-text">
        <div>
          同时设置多种欢迎语，将按照指定成员欢迎语 > 分时段欢迎语 > 默认欢迎语优先级发送
        </div>
      </div>
    </div>
    <el-form ref="form" :model="form" label-width="140px" class="qrcodes-form" label-position="right">
      <div class="config-box">
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">基础信息</div>
          </div>
          <div class="card-content">
            <el-form-item label="渠道名称：">
              <el-input type="text" placeholder="请输入内容" v-model="form.name" maxlength="10" show-word-limit style="width: 400px;"/>
            </el-form-item>
            <el-form-item label="自动通过验证：">
              <div class="rows-center">
                <el-switch v-model="form.switch"/>
                <span class="item-extra" style="margin-left: 8px;">开启后，好友添加使用人员无需好友验证</span>
              </div>
            </el-form-item>
            <el-form-item label="自动打标签：">
              <div class="rows-center">
                <el-button plain icon="el-icon-plus" size="small" @click="isShowCreateTag = true">添加标签</el-button>
              </div>
            </el-form-item>
            <el-form-item label="自动备注：">
              <div class="rows-center">
                <el-switch v-model="form.autoRemark"/>
                <span class="item-extra" style="margin-left: 8px;">
                  <i class="el-icon-warning-outline" style="color: #fa8c16;"></i>
                  变量间若需要分隔符请自己设置；超出20字的部分无法备注成功
                </span>
              </div>
              <div style="margin-top: 10px;" v-if="form.autoRemark">
                <EditorPro :toolTags="['昵称', '性别', '添加日期']" hideEmoji :options="{ placeholder: '请输入备注'}"/>
              </div>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="config-box">
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">成员设置</div>
          </div>
          <div class="card-content">
            <el-form-item label="展示方式：">
              <el-radio-group v-model="form.showType">
                <el-radio :label="1"><span style="color: rgba(0,0,0,.65);">全天展示</span></el-radio>
                <el-radio :label="2"><span style="color: rgba(0,0,0,.65);">分时段展示</span></el-radio>
              </el-radio-group>
              <div class="online-wrap" v-if="form.showType === 2">
                <EditableTabs showTimer showAccount/>
              </div>
            </el-form-item>
            <el-form-item label="成员：">
              <div class="rows-center">
                <!--                选择成员公共组件-->
                <checkAccountDialog :hasValue="userList" @getValue="getValue"></checkAccountDialog>
              </div>
            </el-form-item>
            <el-form-item label="每人每日添加好友：">
              <el-radio-group v-model="form.addFriend">
                <el-radio :label="0"><span style="color: rgba(0,0,0,.65);">不限制</span></el-radio>
                <el-radio :label="1"><span style="color: rgba(0,0,0,.65);">限制</span></el-radio>
                <el-radio :label="2"><span style="color: rgba(0,0,0,.65);">自定义限制</span></el-radio>
              </el-radio-group>
              <div class="backup-setting" style="padding: 20px;" v-if="form.addFriend === 1">
                <el-form-item label="每日限加：" label-width="84px">
                  <div class="rows-center">
                    <el-input size="small" v-model="form.firendCount" style="width: 68px;"/>
                    <span style="margin-left: 8px; color: rgba(0,0,0,.65);">个好友</span>
                  </div>
                </el-form-item>
              </div>
              <div class="backup-setting" v-if="form.addFriend === 2">
                <div class="backup-left">
                  <div class="title">指定成员限制（0人）<span @click="addLimitUser">新增</span></div>
                  <ul class="chooseUser">
                    <li>
                      <div class="name">张敏</div>
                      <div class="number">每日限加：
                        <el-input-number v-model="form.addFriend"></el-input-number>
                        个好友
                      </div>
                      <i class="el-icon-delete"></i>
                    </li>
                    <li>
                      <div class="name">张敏</div>
                      <div class="number">每日限加：
                        <el-input-number v-model="form.addFriend"></el-input-number>
                        个好友
                      </div>
                      <i class="el-icon-delete"></i>
                    </li>
                  </ul>
                  <!--                  <div class="empty-content">-->
                  <!--                    <img class="empty-cover" src="@/assets/images/empty1.png" />-->
                  <!--                    <span class="empty-tips">请先配置成员</span>-->
                  <!--                  </div>-->
                </div>
                <div class="backup-right">
                  <div class="title">其余成员限制（0人）</div>
                  <div class="right-radio">
                    <span>除开左侧指定成员之外的其余活动成员</span>
                    <el-radio-group class="radio-column" v-model="form.account">
                      <el-radio :label="1">
                        <span>每日限加：<el-input size="small" v-model="form.dayCount" style="width: 88px;"/><span style="margin-left: 4px;">个好友</span></span>
                      </el-radio>
                      <el-radio :label="2"><span style="color: rgba(0,0,0,.65);">不限制</span></el-radio>
                    </el-radio-group>
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="备用成员：">
              <div class="rows-center">
                <checkAccountDialog></checkAccountDialog>
              </div>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="config-box">
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">
              欢迎语设置
              <div class="switch-form">
                <el-switch v-model="isOpen" size="small"/>
                <span class="switch-span">{{ isOpen ? '已开启' : '已关闭' }}</span>
              </div>
            </div>
            <div class="card-extra">
              <i class="el-icon-warning-outline" style="color: #fa8c16;"></i>
              <span style="margin-left: 8px;">如在企业微信管理后台已为所选成员设置了欢迎语，则此处设置的将不生效</span>
            </div>
          </div>
        </div>
      </div>
      <div class="config-box" v-if="isOpen">
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">默认欢迎语</div>
          </div>
          <div class="card-content">
            <EditorPro :toolTags="['昵称']" :options="{ placeholder: '请输入内容'}"/>
          </div>
        </div>
      </div>
      <div class="config-box" v-if="isOpen">
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">
              <el-checkbox v-model="checkTimer" style="margin-right: 8px;"/>
              分时段欢迎语
            </div>
            <div class="card-extra">
              <i class="el-icon-warning-outline" style="color: #fa8c16;"></i>
              <span style="margin-left: 8px;">可根据上下班不同的时段设置不同的欢迎语</span>
            </div>
          </div>
          <div class="card-content" v-if="checkTimer">
            <EditableTabs isShowEditor showTimer/>
          </div>
        </div>
      </div>
      <div class="config-box" v-if="isOpen">
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">
              <el-checkbox v-model="checkeAccount" style="margin-right: 8px;"/>
              指定成员欢迎语
            </div>
            <div class="card-extra">
              <i class="el-icon-warning-outline" style="color: #fa8c16;"></i>
              <span style="margin-left: 8px;">可根据指定不同的成员设置不同的欢迎语</span>
            </div>
          </div>
          <div class="card-content" v-if="checkeAccount">
            <EditableTabs isShowEditor showAccount/>
          </div>
        </div>
      </div>
      <div class="config-box">
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">
              活码样式设置
            </div>
          </div>
          <div class="card-content">
            <el-form-item label="活码样式预览：">
              <div class="qrcode-preview"></div>
              <div>
                <el-button icon="el-icon-upload2" plain size="small">上传二维码头像</el-button>
                <span style="color: rgba(0,0,0,.45); margin-left: 8px;">注：此二维码仅作为预览效果展示，切勿直接使用</span>
              </div>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
    <CreateTagDialog :visible="isShowCreateTag" @handCloseDialog="onHandCloseCreateTagDialog"/>
    <limitUser v-if="showLimitUser" :visableIf.sync="showLimitUser"></limitUser>
  </div>
</template>
<script>
import NavigationBarBack from '@/components/NavigationBarBack'
import EditorPro from '@/components/EditorPro';
import EditableTabs from './components/editableTabs'
import CreateTagDialog from './components/createTagDialog'
import CheckAccountDialog from './components/checkAccountDialog'
import limitUser from './limitUser.vue'

export default {
  data() {
    return {
      form: {
        name: '',
        switch: false,
        autoRemark: false,
        showType: 1,
        addFriend: 2,
        firendCount: 1,
        account: 0,
        dayCount: 1
      },
      isOpen: true,
      checkTimer: false,
      checkeAccount: false,
      isShowCreateTag: false,
      isShowAccount: false,
      showLimitUser: false,
      userList:[],
      keyTime:null,//刷新
      rules: {
        name: [
          {required: true, message: '请选择主题', trigger: 'change'}
        ],
      }
    }
  },
  components: {
    NavigationBarBack,
    EditorPro,
    EditableTabs,
    CreateTagDialog,
    CheckAccountDialog,
    limitUser,
  },
  methods: {
    getValue(val,val2) {
    this.userList=val;
    this.keyTime=val2
    console.log('父组件获取到的值', this.userList);
    },
    addLimitUser() {
      this.showLimitUser = true;
    },
    onHandCloseCreateTagDialog() {
      this.isShowCreateTag = false
    },
    onHandCloseCheckAccountDialog() {
      this.isShowAccount = false
    }
  },
}
</script>
<style lang="scss" scoped>
.qrcodes-create-page {
  height: calc(100vh - 48px);
  overflow: auto;
  position: relative;

  .alter-box {
    box-sizing: border-box;
    margin: 0;
    color: rgba(0, 0, 0, .65);
    font-size: 14px;
    background-color: #f0f7ff;
    font-variant: tabular-nums;
    line-height: 24px;
    position: relative;
    display: flex;
    padding: 8px 15px;
    word-wrap: break-word;

    .warning-svg {
      font-size: 18px;
    }

    .waring-text {
      margin-left: 8px;
    }
  }

  .qrcodes-form {
    margin: 12px 12px 76px;

    .config-box {
      margin: 0 auto;
      width: 1000px;
      display: flex;
      flex-direction: column;

      .config-settig-card {
        background: #ffffff;
        margin-top: 12px;
        flex: 1 1;
        text-align: left;
        text-align: initial;
        color: rgba(0, 0, 0, 0.85);
        border-radius: 4px;
        background: #fff;
        font-size: 14px;

        .card-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #e9e9e9;

          .card-title {
            padding: 16px;
            display: flex;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);

            .switch-form {
              margin-left: 8px;
              display: flex;
              align-items: center;
              gap: 8px;

              .switch-span {
                font-size: 14px;
                color: rgba(0, 0, 0, .45);
              }
            }
          }

          .card-extra {
            display: flex;
            align-items: center;
            padding-right: 20px;
            font-weight: 400;
            font-size: 14px;
            color: rgba(0, 0, 0, .65);
          }

          .tips-text {
            display: block;
            color: rgb(47, 84, 235);
            cursor: pointer;
            font-size: 12px;
            font-weight: 400;
            margin-right: 20px;
          }
        }

        .card-content {
          padding: 12px;
          font-size: 14px;

          .rows-center {
            display: flex;
            align-items: center;
          }

          .item-extra {
            clear: both;
            min-height: 24px;
            padding-top: 0;
            color: rgba(0, 0, 0, .45);
            font-size: 14px;
            line-height: 1.5715;
            transition: color .3s cubic-bezier(.215, .61, .355, 1);
          }

          .backup-setting {
            display: flex;
            margin-top: 20px;
            background: #fff;
            border: 1px solid #e9e9e9;

            .backup-left {
              border-right: 1px solid #e9e9e9;
              flex: 1 1;
              height: 278px;
              padding-top: 20px;

              .empty-content {
                margin: 50px auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .empty-cover {
                  width: 80px;
                  height: 80px;
                }

                .empty-tips {
                  font-size: 14px;
                  color: rgba(0, 0, 0, .65);
                  margin-top: 8px;
                }
              }
            }

            .backup-right {
              padding-top: 20px;
              flex: 1 1;
              height: 278px;

              .right-radio {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 180px;

                span {
                  font-size: 14px;
                  font-weight: 400;
                  color: rgba(0, 0, 0, .65);
                  line-height: 20px;
                  margin-bottom: 20px;
                }

                label {
                  margin-bottom: 20px;
                }

                .radio-column {
                  display: flex;
                  flex-direction: column;
                }
              }
            }

            .title {
              display: flex;
              justify-content: space-between;
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: rgba(0, 0, 0, .65);
              line-height: 20px;
              padding: 0 20px;

              span {
                color: #2d8cf0;
                cursor: pointer;
              }
            }
          }

          .online-wrap {
            margin-top: 20px;
          }

          .qrcode-preview {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 150px;
            height: 150px;
            margin-bottom: 8px;
            border: 1px solid #e9e9e9;
            background: url(//s.yezgea02.com/static/1632997029309/qrcode.png) no-repeat;
            background-size: 140px 140px;
            background-position-x: 5px;
            background-position-y: 5px;
          }
        }
      }
    }
  }
}

.chooseUser {
  li {
    display: flex;
    margin: 8px;
    background: #fff;
    border: 1px solid #e9e9e9;
    padding: 12px;
    align-items: center;

    .name {
      width: 100px;
    }

    ::v-deep .el-input-number {
      width: 120px;
    }

    .el-icon-delete {
      margin-left: 15px;
      cursor: pointer;
    }
  }
}
</style>
